<template>
  <el-dialog
    title="会员详情查看"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="view"
    center
  >
    <div>
      <p>
        <span>uid</span>:
        <span>{{userId}}</span>
      </p>
      <p>
        <span>昵称</span>:
        <span>{{nickname}}</span>
      </p>
      <p>
        <span>头像</span>:
        <span>
          <img :src="avatar" style="width: 40px; height: 40px;vertical-align: middle;">
        </span>
      </p>
      <p>
        <span>手机号</span>:
        <span>{{phone}}</span>
      </p>
      <p>
        <span>微信号</span>:
        <span>{{wxNumber}}</span>
      </p>
      <p>
        <span>二维码</span>:
        <span>
          <img :src="codeImg" style="width: 40px; height: 40px;vertical-align: middle;">
        </span>
      </p>
      <p>
        <span>注册时间</span>:
        <span>{{gmtCreate}}</span>
      </p>
      <p>
        <span>最后登录时间</span>:
        <span>{{lastLoginAt}}</span>
      </p>
      <p>
        <span>会员购买时间</span>:
        <span>{{memberStartTime}}</span>
      </p>
      <p>
        <span>会员状态</span>:
        <span v-if="memberStatus==1">未过期</span>
        <span v-else>过期</span>
      </p>
      <p>
        <span>会员到期日</span>:
        <span>{{memberEndTime}}</span>
      </p>
      <p>
        <span>会员身份</span>:
        <span v-if="grade==1">会员</span>
        <span v-if="grade==2">经理</span>
        <span v-if="grade==3">总监</span>
      </p>
      <p>
        <span>管家昵称</span>:
        <span>{{superiorNickname}}</span>
      </p>
      <p>
        <span>管家uid</span>:
        <span>{{superiorUserId}}</span>
      </p>
      <p>
        <span>管家手机号</span>:
        <span>{{superiorPhone}}</span>
      </p>
      <p>
        <span>管家会员身份</span>:
        <span v-if="superiorGrade==1">会员</span>
        <span v-if="superiorGrade==2">经理</span>
        <span v-if="superiorGrade==3">总监</span>
      </p>
      <p>
        <span>状态</span>:
        <span v-if="isForbidden==1">禁止</span>
        <span v-else>非禁止</span>
      </p>
      <div>
        <div class="titles">学分{{totalCredit}}分</div>
        <el-table :data="creditList" border v-loading="creditLoading" style="width: 100%;">
          <el-table-column prop="gmtCreated" header-align="center" align="center" label="时间"></el-table-column>
          <el-table-column prop="creditDesc" header-align="center" align="center" label="记录">
            <template slot-scope="scope">
               {{scope.row.businessType==1 ?'签到':' '}}
               {{scope.row.businessType==2 ?'打卡':' '}}
               {{scope.row.businessType==3 ?'全款捐积分':' '}}
               {{scope.row.businessType==4 ?'消费失败退回':' '}}
               <span v-if="scope.row.businessType==5">{{creditDesc.nickname}}购买会员</span>
            </template>
          </el-table-column>
          <el-table-column prop="credit" header-align="center" align="center" label="分值"></el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
      <div class="love">
        <div class="titles">爱心分{{lovetotalCredit}}分</div>
        <el-table :data="loveList" border v-loading="creditLoading" style="width: 100%;">
          <el-table-column prop="gmtCreated" header-align="center" align="center" label="时间"></el-table-column>
          <el-table-column prop="credit_desc" header-align="center" align="center" label="记录"></el-table-column>
          <el-table-column prop="love" header-align="center" align="center" label="分值"></el-table-column>
        </el-table>
         <el-pagination
          @size-change="lovesizeChangeHandle"
          @current-change="lovecurrentChangeHandle"
          :current-page="lovepageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="lovepageSize"
          :total="lovetotalPage"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
      <div>
        <!-- <vue-event-calendar :events="demoEvents"  @day-changed="handleDayChanged"
        @month-changed="handleMonthChanged"></vue-event-calendar>-->
        <div class="titles">学习记录</div>
        <vue-event-calendar
          :events="demoEvents"
          @day-changed="handleDayChanged"
          @month-changed="handleMonthChanged"
        >
          <template slot-scope="props">
            <div
              v-for="(event, index) in props.showEvents"
              class="event-item classItem"
              :key="index"
            >{{event}}</div>
          </template>
        </vue-event-calendar>
        <div style="margin-top:10px;">
          <span class="borderColor"></span>
          <span>已完成</span>
          <span class="bgColor"></span>
          <span>未完成</span>
        </div>
      </div>
      <div style="margin-top: 20px;">
        <div class="titles">每日学习总时长</div>
        <el-table :data="readingTime" border v-loading="readingTimeLoading" style="width: 100%;">
          <el-table-column prop="statTime" header-align="center" align="center" label="时间"></el-table-column>
          <el-table-column prop="readingTime" header-align="center" align="center" label="学习总时长/分钟"></el-table-column>
        </el-table>
        <el-pagination
          @size-change="sizeChangeHandle1"
          @current-change="currentChangeHandle1"
          :current-page="pageIndex1"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize1"
          :total="totalPage1"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false" style="text-align:center">返回</el-button>
    </span>
  </el-dialog>
</template>
<style>
.__vev_calendar-wrapper .cal-wrapper {
  width: 100% !important;
  padding: 0 !important;
  border: 1px solid #ebeef5;
}
.cal-header .title {
  border: none !important;

}
.borderColor{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #409EFF;
    border-radius: 10px;
    vertical-align: middle;
}
.bgColor{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 10px;
    vertical-align: middle;
    border: solid 1px #ccc;
}
.inline {
  display: inline;
}
.types div {
  display: inline;
}
.el-dialog__body .titles {
  text-align: center;
  border: 1px solid #ebeef5;
  border-bottom: none;
  height: 50px;
  line-height: 50px;
  background-color: #7CB5EF;
  color: #fff;
}
.love {
  margin: 30px 0px;
}
.events-wrapper {
  display: none;
}
.is-event {
  border-color: #409EFF !important;
  background-color: #409EFF !important;
  color: #fff;
}
.event .date-num {
  color: #fff !important;
}
</style>

<script>
// import { Calendar } from "element-ui";
import QRCode from "qrcode";
export default {
  data() {
    return {
      readingTime: [],
      readingTimeLoading:false,
      demoEvents: [
        {
          date: "2019-05-23",
          title: "eat",
        }
      ],
      visible: false,

      creditLoading:false,
      avatar: '' ,
      gmtCreate : '' ,
      grade: '' ,
      id : '' ,
      isForbidden:'' ,
      lastLoginAt: '' ,
      memberEndTime: '' ,
      memberStartTime : '' ,
      memberStatus:'',
      nickname: '' ,
      phone : '' ,
      superiorGrade: '' ,
      superiorNickname: '' ,
      superiorPhone: '' ,
      superiorUserId: '' ,
      userId: '' ,
      wxNumber: '' ,
      wxQrcode: '',
      // 学分列表
      creditList: [], //学分
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      pageIndex1: 1,
      pageSize1: 10,
      totalPage1: 0,
      totalCredit:'',//学分
      loveList:[],
      lovetotalCredit:'',//爱心
      lovepageIndex: 1,
      lovepageSize: 10,
      lovetotalPage: 0,
      creditDesc:'',
      codeImg:'',
    };
  },
  methods: {
    // 下个月
    handleDayChanged(data) {
        var year = data.replace(/\年/g, "-").substring(0,5);
        var month =  data.replace(/\月/g, "-").substring(data.length-3);
        var day = '01';
        let currentdate = year + month + day;
    },
    // 上个月
    handleMonthChanged(data) {
          //  let a = data;
          var year = data.replace(/\年/g, "-").substring(0,5);
          var month =  data.replace(/\月/g, "-").substring(data.length-3);
          var day = '01';
           let currentdate = year + month + day;
           this.$http({
            url: this.$http.adornUrl("/course/task/getTaskCalendar"),
            method: "get",
              params: this.$http.adornParams({
                userId:this.userId+"",
                queryDate:currentdate
              })
          }).then(({ data }) => {
            if (data && data.code === 0) {

            } else {
              this.dataList = [];
              this.totalPage = 0;
            }
            this.dataListLoading = false;
          });
    },
    showQRcode(){
            let codeUrl = this.wxQrcode||"";
            var opts = {
                errorCorrectionLevel: 'H',
                type: 'image/jpeg',
                rendererOpts: {
                  quality: 0.3
                }
            }
            QRCode.toDataURL(codeUrl, opts, (err, url) => {
                this.codeImg = url;
            })
      },
    init(userId) {
      this.userId = userId+"";
      console.log(typeof(this.userId));
      this.visible = true;
      this.$nextTick(() => {
        this.initReadingTime(this.userId)
        let promiseList = [];
        promiseList.push(this.$http({
            url: this.$http.adornUrl(`/user/appuser/see/${this.userId}`),
            params: this.$http.adornParams(),
            method: "get",
        }).then(({ data }) => {
            return data;
        }).catch(e => {
            console.log(e);
        }))

        promiseList.push(this.$http({
              url: this.$http.adornUrl("/partner/credit/list"),
              method: "get",
              params: this.$http.adornParams({
                page: this.pageIndex,
                limit: this.pageSize,
                userId:this.userId
              })
         }).then(({ data }) => {
            return data;
        }).catch(e => {
            console.log(e);
        }))
        promiseList.push(this.$http({
              url: this.$http.adornUrl("/partner/love/list"),
              method: "get",
              params: this.$http.adornParams({
                page: this.lovepageIndex,
                limit: this.lovepageSize,
                userId:this.userId
              })
         }).then(({ data }) => {
            return data;
        }).catch(e => {
            console.log(e);
        }))
        // 当前时间
         var date = new Date();
          var seperator1 = "-";
          var year = date.getFullYear();
          var month = date.getMonth() + 1;

          var strDate = date.getDate();
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
          }
        var currentdate = year + seperator1 + month + seperator1 + strDate;

        console.log(currentdate)
        console.log(typeof currentdate)
          promiseList.push(this.$http({
              url: this.$http.adornUrl("/course/task/getTaskCalendar"),
              method: "get",
              params: this.$http.adornParams({
                userId:this.userId,
                queryDate:currentdate
              })
         }).then(({ data }) => {
            return data;
        }).catch(e => {
            console.log(e);
        }))
              Promise.all(promiseList).then(data => {
                console.log(data[0])
                if (data[0].code===0) {
                 console.log(data[0].code===0)
                 this.avatar=data[0].MemberSeeInfoVo.avatar
                 this.gmtCreate =data[0].MemberSeeInfoVo.gmtCreate
                 this.grade=data[0].MemberSeeInfoVo.grade
                 this.id=data[0].MemberSeeInfoVo.id
                 this.isForbidden=data[0].MemberSeeInfoVo.isForbidden
                 this.lastLoginAt=data[0].MemberSeeInfoVo.lastLoginAt
                 this.memberEndTime=data[0].MemberSeeInfoVo.memberEndTime
                 this.memberStartTime=data[0].MemberSeeInfoVo.memberStartTime
                 this.memberStatus=data[0].MemberSeeInfoVo.memberStatus
                 this.nickname=data[0].MemberSeeInfoVo.nickname
                 this.phone =data[0].MemberSeeInfoVo.phone
                 this.superiorGrade=data[0].MemberSeeInfoVo.superiorGrade
                 this.superiorNickname=data[0].MemberSeeInfoVo.superiorNickname
                 this.superiorPhone=data[0].MemberSeeInfoVo.superiorPhone
                 this.superiorUserId=data[0].MemberSeeInfoVo.superiorUserId
                 this.userId=data[0].MemberSeeInfoVo.userId
                 this.wxNumber=data[0].MemberSeeInfoVo.wxNumber
                 this.wxQrcode=data[0].MemberSeeInfoVo.wxQrcode
                 this.showQRcode();
                }
                if(data[1].code===0){
                  // console.log(data[1])
                   this.creditList=data[1].page.list;
                   this.totalPage = data[1].page.totalCount;
                   this.totalCredit= data[1].totalCredit;
                  //  for(var i=0;i<this.creditList.length;i++){
                  //      this.creditDesc=JSON.parse(this.creditList[i].creditDesc)
                  //     //  console.log(this.creditDesc)
                  //   }
                }else {
                  this.creditList = [];
                  this.totalPage = 0;
                }
                if(data[2].code===0){
                  this.loveList=data[2].page.list;
                  this.lovetotalPage = data[2].page.totalCount;
                  this.lovetotalCredit= data[2].totalCredit
                }else {
                    this.loveList = [];
                    this.lovetotalPage = 0;
                }
                if(data[3].code===0){
                  var demo = data[3].data;
                  for (var i = 0; i <demo.length; i++) {
                      var day = demo[i].gmtCreated.replace(/\-/g, "/").substring(0,10);
                      day = day.split(" ")[0];
                      this.demoEvents.push({
                        date: day,
                        title: demo[i] //日期具体在html里面切割
                      });
                    }
                }
            }).catch(e => {
                console.log(e)
            })
      });
    } ,
    initReadingTime(userId) {
      this.$http({
        url: this.$http.adornUrl("/user/appuser/memberReadingTimeList"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex1,
          limit: this.pageSize1,
          userId:userId
        })
      }).then(({ data }) => {
        this.readingTime = data.page.list
        this.totalPage1 = data.page.totalCount
      }).catch(e => {
        console.log(e);
      })
    },
        // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.init(this.userId);
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.init(this.userId);
    },
    // 每页数
    sizeChangeHandle1(val) {
      this.pageSize1 = val;
      this.pageIndex1 = 1;
      this.initReadingTime(this.userId);
    },
    // 当前页
    currentChangeHandle1(val) {
      this.pageIndex1 = val;
      this.initReadingTime(this.userId);
    },

           // 每页数
    lovesizeChangeHandle(val) {
      this.lovepageSize = val;
      console.log(this.lovepageSize)
      this.lovepageIndex = 1;
      this.init(this.userId);
    },
    // 当前页
    lovecurrentChangeHandle(val) {
      console.log(this.lovepageIndex)
      this.lovepageIndex = val;
      this.init(this.userId);
    },

  }
};
</script>
